<div class="hidden lg:flex items-center gap-2 overflow-x-auto py-3 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
    <ul class="flex items-center gap-2 shrink-0">
        <% for(let item of siteData.nav) { %>
            <li class="shrink-0">
                <a href="<%
                    let href = '';
                    if (pageData.version) {
                        href += '/' + pageData.version;
                    }
                    if (locals.siteData.feature?.i18n?.enable && pageData.language) {
                        href += '/' + pageData.language;
                    }
                    href += item.href.startsWith('/') ? item.href : '/' + item.href;
                %><%= href %>"
                   class="inline-flex items-center rounded-lg justify-center px-3.5 py-3
                          text-sm font-medium leading-none whitespace-nowrap
                          <%= darkClasses('dark:text-white') %>
                          <%= isPathInNavItem(pageData.noLocalePath, item)
                           ? `text-blue-600 ${darkClasses('dark:text-blue-400')} bg-blue-50/80 ${darkClasses('dark:bg-blue-900/20')} font-medium`
                           : `hover:text-gray-900 ${darkClasses('dark:hover:text-gray-200')} hover:bg-gray-50 ${darkClasses('dark:hover:bg-gray-800/40')}`
                   %>">
                    <%= item.title %>
                </a>
            </li>
        <% } %>
    </ul>
</div>